
/**
 * 一体化方案
 * 场景二 数据清洗
 *2018.5.7
 */

addModule({
	name: "Data Cleaning",
	
	config : {
		// 播放时长, 毫秒
		duration: 6000,

		//图像参数
		r : 40,
		web_size : 15,
		name : [],
		color : [],
	},

	graphic: {
		opt: null,

		circles: [],

		rects: [],
	},
	
	/**
	 * 本模块的初始化函数
	 */
	init : function() {
		// 调用: 将分镜 (子场景入口函数) 全部加到场景列表中去
		addSceneFunc("data-upload", this.stage1, this.name, null);
		addSceneFunc("data-cleaning", this.stage2, this.name, null);
		addSceneFunc("data-dereplication", this.stage3, this.name, null);
	},

	stage1 : function(){
		var circle = new Array();
		var rect = new Array();
		
		var circle0 = new echarts.graphic.Circle({   
			shape: {
				cx: _width/5+this.config.r,
				cy: _height/3+this.config.r,
				r: this.config.r
			},
			style: {
				fill: this.config.color[0],
				text: this.config.name[0],
			},
			silent: true
			});// 蓝点

		var circle1 = new echarts.graphic.Circle({   
			shape: {
				cx: _width/7 ,
				cy: _height/2,
				r: this.config.r
			},
			style: {
				fill: this.config.color[1],
				text: this.config.name[1],
			},
			silent: true
			});// 绿点

		var circle2 = new echarts.graphic.Circle({   
			shape: {
				cx: _width/5,
				cy: _height/4,
				r: this.config.r
			},
			style: {
				fill: this.config.color[2],
				text: this.config.name[2],
			},
			silent: true
			});// 黄点

		var rect0 = new echarts.graphic.Rect({
			shape : {
				width : 2*this.config.r - 30,
				height : 2*this.config.r,
				r : [10,2,2,2],
				x:_width/4,
				y:_height/4,
			},
			style : {
				fill: this.config.color[3],
				text: this.config.name[3],
			}
		});//html文件

		var rect1 = new echarts.graphic.Rect({
			shape : {
				width : 2*this.config.r,
				height : this.config.r/2,
				r : [10,1,1,1],
				x:_width/9,
				y:_height/3,
			},
			style : {
				fill: this.config.color[4],
				text: this.config.name[4],
			}
		});//html文件

		var rect2 = new echarts.graphic.Rect({
			shape : {
				width : 2*this.config.r,
				height : this.config.r/2,
				r : [1,1,1,1],
				x:_width/9,
				y:_height/3+this.config.r/2,
			},
			style : {
				fill: this.config.color[4],
			}
		});//html文件

		var rect3 = new echarts.graphic.Rect({
			shape : {
				width : 2*this.config.r,
				height : this.config.r/2,
				r : [1,1,1,1],
				x:_width/9,
				y:_height/3+this.config.r,
			},
			style : {
				fill: this.config.color[4],
			}
		});//html文件

		var rect4 = new echarts.graphic.Rect({
			shape : {
				width : _width/5,
				height : _height/2,
				r : [15,15,15,15],
				x : 2* _width/5,
				y : _height/7,
			},
			style : {
				fill: this.config.color[5],
				opacity: 0.4,
				text: this.config.name[5],
				textPosition: 'bottom',
				textWidth: 10,
			}
		});//数据库

	    circle.push(circle0);
    	circle.push(circle1);
    	circle.push(circle2);
    	this.graphic.circles = circle;
    	
    	rect.push(rect0);
    	rect.push(rect1);
    	rect.push(rect2);
    	rect.push(rect3);
    	rect.push(rect4);
    	this.graphic.rects = rect;

    	zr.configLayer(0, {
        	motionBlur: false
    	});

    	circle0.animate('', false)
    	.when(2000,{
    		position:[ _width/4, _height/20]
    	})
    	.start('cubicIn');

    	circle1.animate('', false)
    	.when(2000,{
    		position:[ 2*_width/5, _height/20]
    	})
    	.start('cubicIn');

    	circle2.animate('', false)
    	.when(2000,{
    		position:[ _width/4, 0]
    	})
    	.start('cubicIn'); 

		rect0.animate('', false)
    	.when(2000,{
    		position:[ _width/4, 0]
    	})
    	.start('cubicIn'); 

    	rect1.animate('', false)
    	.when(2000,{
    		position:[ 2*_width/5, _height/10]
    	})
    	.start('cubicIn');

    	rect2.animate('', false)
    	.when(2000,{
    		position:[ 2*_width/5, _height/10]
    	})
    	.start('cubicIn');

		rect3.animate('', false)
    	.when(2000,{
    		position:[ 2*_width/5, _height/10]
    	})
    	.start('cubicIn');

    	zr.add(circle0);
    	zr.add(circle1);  
    	zr.add(circle2);
    	zr.add(rect0);
    	zr.add(rect1);
    	zr.add(rect2);
    	zr.add(rect3);
    	zr.add(rect4);

    	addRenderFunc("data-upload", function(){
            endScene();
            zr.remove(circle0);
            zr.remove(circle1);
            zr.remove(circle2);
            zr.remove(rect0);
            zr.remove(rect1);
            zr.remove(rect2);
            zr.remove(rect3);
            zr.remove(rect4);

            myChart.clear();
        }, {
            once : true,
            delay : this.config.duration/2
        });
     
	},

	stage2:function(){
		var n = 30;
		var rect_C = new Array();
		var ran = _height / 2+(Math.random()*(1+1)-1) * 100;

		var rectA = new echarts.graphic.Rect({
			shape : {
				width : _width/5,
				height : _height/2,
				r : [15,15,15,15],
				x : _width/3,
				y : _height/7,
			},
			style : {
				fill: this.config.color[3],
				opacity: 0.2,
				text: this.config.name[5],
				textPosition: 'bottom',
				textWidth: 10,
			}
		});//数据库
    	zr.add(rectA);        

    	for(var i = 0; i < 4; i++){
    		for(var j = 0; j < 7; j++){
    			if (j == 0|| j == 2|| j ==5){
    				var rect_ij = new echarts.graphic.Rect({
    					shape : {
    						width :  this.config.r,
    						height :  this.config.r/2,
    						r : [1],
    						x : _width/3 + this.config.r + (this.config.r + 20) * i ,
    						y : _height/7 + this.config.r + (this.config.r + 20) * j,
    					},
    					style : {
    						fill: this.config.color[i]
    					}
    				}); 
    			}else{
    				var rect_ij = new echarts.graphic.Rect({
    					shape : {
    						width :  3*this.config.r/4,
    						height :  2*this.config.r/3,
    						r : [1],
    						x : _width/3 + this.config.r + (this.config.r + 20) * i ,
    						y : _height/7 + this.config.r + (this.config.r + 20) * j,
    					},
    					style : {
    						fill: this.config.color[i]
    					}
    				}); 
    			}
    			zr.add(rect_ij);
    			rect_C.push(rect_ij);
    			this.graphic.rects = rect_C;
    		}
    	}//文件上传

    	for(var p = 0; p < this.config.web_size; p++){
    		for(var q = 0; q < this.config.web_size; q++){
    			var particle_pq = new echarts.graphic.Circle({
    				shape : {
    					cx:  -(this.config.r)*q,
						cy:  _height / 8 + (this.config.r)*p,
						r: this.config.r/2-q
    					},
    					style : {
    						fill: this.config.color[5]
    					}
    			});
    			zr.add(particle_pq);

    			particle_pq.animate('', false)
    			.delay(1000)
    			.when(2000,{
    			position:[ 2*_width, 0]
    			})
    			.start('cubicIn');
    		}
    	}//清洗

		addRenderFunc("data-cleaningdata-dereplication", function(){
            endScene();
            for(var a = 0; a < n; a++){
            	zr.remove(this.graphic.rects[a]);
            }
            myChart.clear();
        }, {
            once : true,
            delay : this.config.duration/2
        });
	},

	stage3:function(){
		var rect_D = new Array();
		var rectB = new echarts.graphic.Rect({
			shape : {
				width : _width/5,
				height : _height/2,
				r : [15,15,15,15],
				x : _width/3,
				y : _height/7,
			},
			style : {
				fill: this.config.color[5],
				opacity: 0.2,
				text: this.config.name[5],
				textPosition: 'bottom',
				textWidth: 10,
			}
		});//数据库
    	zr.add(rectB);

    	for(var i = 0; i < 4; i++){
    		for(var j = 0; j < 2; j++){
    			if (j == 0){
    				var rect_ij = new echarts.graphic.Rect({
    					shape : {
    						width :  this.config.r,
    						height :  this.config.r/2,
    						r : [1],
    						x : _width/3 + this.config.r + (this.config.r + 20) * i ,
    						y : _height/4 + this.config.r + (this.config.r + 20) * j,
    					},
    					style : {
    						fill: this.config.color[i]
    					}
    				}); 
    			}else{
    				var rect_ij = new echarts.graphic.Rect({
    					shape : {
    						width :  3*this.config.r/4,
    						height :  2*this.config.r/3,
    						r : [1],
    						x : _width/3 + this.config.r + (this.config.r + 20) * i ,
    						y : _height/4 + this.config.r + (this.config.r + 20) * j,
    					},
    					style : {
    						fill: this.config.color[i]
    					}
    				}); 
    			}
    			zr.add(rect_ij);
				rect_D.push(rect_ij);
    			this.graphic.rects = rect_D;
    		}
    	}//清洗去重
		
		addRenderFunc("data-dereplication", function(){
            endScene();
            zr.remove(rectB);
            for(var a = 0; a < 9; a++){
            	zr.remove(this.graphic.rects[a]);
            }
            myChart.clear();
        }, {
            once : true,
            delay : this.config.duration/3*2
        });
	}


});
